{% extends "base.jinja2" %}

{% block mainbody %}
    <div style="clear: both"></div>
    <link href="./css/map_styles.css" rel="stylesheet">


    <div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">

        <ul id="main-nav" class="main-nav nav nav-tabs nav-stacked" style=" width: 100%">

            {{ left_nav }}

        </ul>

        <div style="clear: both"></div>
    </div>
    <div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">


        <div class="col-sm-10">
            <br>

            <div id='map'></div>

            <script type="text/javascript">
                var popup = L.popup();

                function onMapClick(e) {
                    popup
                        .setLatLng(e.latlng)
                        .setContent("Location:" + e.latlng.toString())
                        .openOn(map);
                }

                var map = L.map('map', {
                    center: [0, 0],
                    zoom: 2
                });
                var the_basemap = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
                    maxZoom: 18,
                    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
                    '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
                    id: 'mapbox.light'
                }).addTo(map);
                var wmsLayer = L.tileLayer.wms('http://47.94.22.90:9011/service?', {
                    layers: 'maplet_mulwold',
                    format: 'image/png',
                    transparent: true
                }).addTo(map);
                map.on('click', onMapClick);
                var baseMaps = {
                    'BaseMap': the_basemap
                };
                var overlayMaps = {
                    'WMS': wmsLayer
                };
                L.control.layers(baseMaps, overlayMaps).addTo(map);
            </script>

            <br>

            <div class="row">
                <h3 class="bk_img">
                    <img src="./images/team_logo.png" width="5%">
                    静态WebGIS网站生成器演示系统
                </h3>


                <div class="col-sm-6">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <p>基于开源GIS技术开发，使用静态网站形式对GIS数据进行发布。<p/>

                            <p> <p/>
                            <p>目的是用于解决发布较多数量的地图时的数据更新、样式修改，以及不同样式组合应用的问题。 <p/>
                            <p>尽量实现数据源唯一，使用 XLSX 文件定义样式。 <p/>
                            <p>主要实现GIS数据图层的发布，但也实现了多源数据发布为单个地图切片，以及多个图层发布为图层分组的功能。 <p/>

                            <p>安装：<code>pip install gislite</code></p>

                        </div>
                    </div>
                </div>

                <div class="col-sm-6">
                    <div class="panel panel-default">
                        <div class="panel-body">


                            <a href="https://github.com/bukun/GISLite" style="float: right;">


                                <img width="149" height="149"
                                     src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149"
                                     class="attachment-full size-full" alt="Fork me on GitHub"
                                     data-recalc-dims="1">


                            </a>
                            <ul>
                                <li>基于MapServer、MapProxy；</li>
                                <li>使用开放电子表格格式 XLSX 定义样式；</li>
                                <li>可用于团队地理信息数据快速发布管理；</li>
                                <li>开放源代码，发布于 Github 。</li>

                            </ul>
                            <h3>相关网站</h3>

                            <ul class="mindex">
                                <li>项目GitHub地址： <a href="https://github.com/bukun/GISLite">https://github.com/bukun/GISLite</a></li>
                                <li>项目PyPi地址： <a href="https://pypi.org/project/gislite/">https://pypi.org/project/gislite/</a></li>
                            </ul>

                            <h3>技术背景网站</h3>
                            <ul class="mindex">
                                <li><a href="https://www.osgeo.cn/pygis/">https://www.osgeo.cn/pygis/</a>
                                    《Python与开源GIS》，使用 Python 读取与处理 GIS数据 的工具。
                                </li>
                                <li><a href="https://www.osgeo.cn/webgis/">https://www.osgeo.cn/webgis/</a> 对 MapServer，
                                    MapProxy， Leaflet 的基本介绍。
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>


        </div>
    </div>

    <div style="clear: both"></div>
    <br/>
{% endblock %}